<template>
  <div>
    <div class="banner">
      <el-carousel trigger="click" height="600px">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
          <img width="100%" height="100%" :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="item-box2"></div>
    <div class="mod-tab-content">
      <div class="brand-item">
        <div class="mod-con clearfix">
          <div style="float: left; width: 600px">
            <span style="font-size: 30px; color: #2a2e2e">铝行情走势</span>
            <div class="item-box"></div>
            <div><ChartLine ref="chart_line_one" /></div>
          </div>
          <div style="float: right; width: 600px">
            <span style="font-size: 30px; color: #2a2e2e">市场报价</span>
            <div class="look-more">
              <span v-on:click="openHangqingList">查看全部<i></i></span>
            </div>
            <div>
              <div class="item-box1"></div>
              <vue-seamless-scroll
                :data="listData"
                :class-option="optionHover"
                class="seamless-warp"
              >
                <ul class="item">
                  <li
                    v-for="(item, index) in listData"
                    :key="index"
                    class="hangqing"
                  >
                    <a v-on:click="openNewsList">
                      <span class="title" v-text="item.title"></span
                      ><span class="hangqing-date" v-text="item.date"></span>
                    </a>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>

      <div
        class="brand-item white-bg brand-item-one pc-tab-brand mobile-tab-brand"
        id="media-con-1"
      >
        <div class="mod-con clearfix">
          <div class="t-flx clearfix">
            <div class="label-box">
              <h3>新闻前沿</h3>
            </div>
            <div class="look-more">
              <span @click="openNewsList">查看全部<i></i></span>
            </div>
          </div>
          <div class="dynamics-flx clearfix">
            <div class="list-box" v-for="(item, index) in news" :key="index">
              <a @click="newsDetailTo(item.id)">
                <img :src="item.imageUrl" :alt="item.imageTitle" class="img" />
                <div class="mess">
                  <p class="title">{{ item.title }}</p>
                  <p class="desc">
                    {{ item.desc }}
                  </p>
                  <p class="date">{{ item.date }}</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="brand-item white-bg brand-item-three pc-tab-brand mobile-tab-brand"
      id="media-con-3"
    >
      <div class="mod-con clearfix">
        <div class="t-flx clearfix">
          <div class="label-box">
            <h3>行业聚焦</h3>
          </div>
          <div class="look-more">
            <span v-on:click="openNewsList">查看全部<i></i></span>
          </div>
        </div>
        <div class="perspective-flx clearfix">
          <div class="pic">
            <a :href="forceOne.linkUrl">
              <img :src="forceOne.imageUrl" class="img" />
              <div class="label">
                <p class="txt">{{ forceOne.title }}</p>
              </div>
            </a>
          </div>
          <div class="list-box" v-for="(item, index) in forceNews" :key="index">
            <div class="li clear-margin" v-if="index == 0">
              <a href="item.linkUrl">
                <p class="label">{{ item.title }}</p>
                <p class="date">{{ item.date }}</p>
              </a>
            </div>
            <div class="li" v-else-if="index == 1 || index == 2">
              <a href="item.linkUrl">
                <p class="label">{{ item.title }}</p>
                <p class="date">{{ item.date }}</p>
              </a>
            </div>
            <div class="li" v-else-if="index == 3">
              <a href="item.linkUrl">
                <p class="label">{{ item.title }}</p>
                <p class="date">{{ item.date }}</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/utils/HttpUtils";
import ChartLine from "../ChartLine.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import { getNewsList } from "@/api/news";
import { getBannerList } from "@/api/banner";

export default {
  data() {
    return {
      // 轮播图
      banners: [require("@/assets/bg1.jpg"), require("@/assets/bg2.jpg")], //图片列表
      news: [
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201156.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2021/05/19/9a9462b6aa7f17be9130743e77dd1b83.jpg!article.cover",
          imageTitle: "",
          title: "数字化展览︰云端一览敦煌莫高窟文物",
          desc: "腾讯携手敦煌研究院和法国吉美国立亚洲艺术博物馆宣布启动“数字藏经洞”项目，探索敦煌莫高窟文物数字化保护与弘扬的新路径。",
          date: "2021.05.19",
        },
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201109.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2021/01/19/0a410c4cf74dc427167b071b46d89381.png!article.cover",
          imageTitle: "",
          title: "微信持续开拓生态 激发商业潜能 赋能品牌新机遇",
          desc: "&quot;2021微信公开课PRO”在广州正式开课，正值微信上线十周年，微信生态持续发展，包括小程序在内的核心功能为用户和企业创造了更多价值。",
          date: "2021.05.19",
        },
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201100.html",
          imageUrl:
            "https://static.www.tencent.com/uploads/2020/12/11/04d1ddf23060fd3689f0a5228b04539d.png!article.cover",
          imageTitle: "",
          title: "腾讯游戏开发者大会 助力新一代游戏开发者",
          desc: "连续4晚、25场精彩演讲、近万人参与，腾讯与游戏开发者共迎行业变革新机遇。",
          date: "2021.05.19",
        },
      ],
      forceNews: [
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201155.html",
          title: "#成才在腾讯：技术匠人，为科技注入生命",
          date: "2021.05.19",
        },
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201153.html",
          title: "如果游戏会说话：创作属于游戏自己的声音表达",
          date: "2021.05.19",
        },
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201151.html",
          title: "#成才在腾讯：热爱可抵岁月漫长，游戏点燃职业理想",
          date: "2021.05.19",
        },
        {
          id: "1",
          linkUrl: "https://www.tencent.com/zh-cn/articles/2201144.html",
          title: "娱乐行业云端转型",
          date: "2021.05.19",
        },
      ],
      listData: [
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月28日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月27日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月26日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月25日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月24日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月23日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月22日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月21日）",
          date: "2017-12-16",
        },
        {
          title: "今日铝价格查询_各地最新铝市场报价（2021年05月20日）",
          date: "2017-12-16",
        },
      ],
      forceOne: {
        linkUrl: "https://www.tencent.com/zh-cn/articles/2201154.html",
        title: "游戏的无限可能",
        imageUrl:
          "https://static.www.tencent.com/uploads/2021/05/17/b20fbefa30e15d908cfab8009a2caec0.jpg",
      },
      name: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
      xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      legend: {
        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
      },
      series: [
        {
          name: "邮件营销",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "联盟广告",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "视频广告",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "直接访问",
          type: "line",
          stack: "总量",
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  },
  computed: {
    optionHover() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {
    openHangqingList() {
      this.$router.push({ name: "offerList" });
    },
    newsDetailTo(id) {
      console.log("打开文章id :" + id);
      this.$router.push({ path: "/newsHome/news-detail", query: { id: id } });
    },
    openNewsList() {
      this.$router.push({ name: "newsList" });
    },
    getBannerList() {
      let params = {};
      params.pageNo = 1;
      params.pageSize = 1;
      params.bannerType = 1;
      getBannerList(params.bannerType, params.pageNo, params.pageSize).then(
        (response) => {
          console.log(response.data);
          for( let i = 0; i<response.data.length;i++){
            let record= response.data[i].bannerUrl
            this.banners.push(record)
          }
        }
      );
      console.log(this.banners)
    },
    getNewsList() {
      let params = {};
      params.pageNo = 1;
      params.pageSize = 3;
      params.newsType = "1";
      getNewsList(params.newsType, params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.news = response.data.records;
        }
      );
      // data1.data = params
      // var data = http.http.apiGet(pageUrl, data1);
    },
    getForceNewsList() {
      let params = {};
      params.pageNo = 1;
      params.pageSize = 5;
      params.newsType = "2";
      getNewsList(params.newsType, params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.forceNews = response.data.records;
        }
      );
    },
    getForceOne() {
      // console.log(this.forceOne);
      let params = {};
      params.pageNo = 1;
      params.pageSize = 1;
      params.newsType = "2";
      getNewsList(params.newsType, params.pageNo, params.pageSize).then(
        (response) => {
          // console.log(response.data);
          this.forceOne = response.data.records;
        }
      );
      // this.forceOne = this.forceNews[1];
    },
  },
  mounted() {
    this.getBannerList();
    this.getNewsList();
    this.getForceNewsList();
    this.getForceOne();
    const { name, xData, series, legend } = this;
    console.log(this.$refs);
    this.$refs.chart_line_one.initChart(name, xData, series, legend);
  },
  components: {
    ChartLine,
    vueSeamlessScroll,
  },
};
</script>

<style scoped>
@import "~@/assets/css/base.css";
@import "~@/assets/css/index.css";
@import "~@/assets/css/base-2.css";
@import "~@/assets/css/media.css";
.banner {
  width: 100%;
  height: 600px;
  background-image: linear-gradient(90deg);
  border: solid 1px #707070;
}
.new-image {
  width: 80%;
  height: 546px;
}
.look-more {
  cursor: pointer;
}
.seamless-warp {
  height: 350px;
  overflow: hidden;
  padding-bottom: 40px;
}
.item-box {
  margin-top: 10px;
  margin-bottom: 35px;
}
.item-box1 {
  margin-top: 50px;
  margin-bottom: 35px;
}
.item-box2 {
  margin-top: 150px;
  margin-bottom: 150px;
}
.hangqing {
  display: block;
  float: left;
  width: 600px;
  height: 50px;
  line-height: 50px;
}
.title {
  font-size: 15px;
}
.hangqing-date {
  float: right;
  font-size: 14px;
}
</style>